<template>
	<view class="warp">
		<view class="nav-content">
			<view class="image-box">
				<uni-icons v-if="userInfo == null" type="contact-filled" size="60"></uni-icons>
				<image v-else :src="userInfo.avatarUrl" mode=""></image>
			</view>
			<view class="uesr-info" v-if="is_members == 0">
				<view class="info-top" v-if="userInfo == null">未登录</view>
				<view class="info-top" v-else>{{ userInfo.nickName }}</view>
				<view class="info-bottom">
					开通会员，尊享多种特权！
				</view>
			</view>
			<view class="uesr-info" v-else>
				<view class="info-top">
					<text>{{ userInfo.nickName }}</text>
					<image class="icon-box" src="../../static/huiyuan1-01.png" mode=""></image>
				</view>
				<view class="info-bottom">
					会员将于<text style="color: #D81E06;">{{expiration_time}}</text>到期
				</view>
			</view>
		</view>
		<view class="view-list">
			<view v-for="(item,index) in list" :key="index" :class="{active: index === current}"
				@click="handleClick(item,index)">
				<view>{{item.moth}}</view>
				<view class="discountPrice">{{item.discountPrice}}</view>
				<view class="originalPrice">{{item.originalPrice}}</view>
			</view>
		</view>
		<view class="privilege-list">
			<view v-for="(item,index) in privilegeList" :key="index" class="item">
				<view>
					<image :src="item.icon" mode=""></image>
				</view>
				<view>{{item.text}}</view>
			</view>
		</view>
		<view class="title">
			<text>会员专享</text>
			<text @click="getMore">更多剧集 >></text>
		</view>
		<view class="Btn" @click="goKaiTong" v-if="is_members == 0">
			立即开通
		</view>
		<view class="Btn" @click="goKaiTong" v-else>
			立即续费
		</view>
		<view class="selectBox">
			<!-- 列表 -->
			<view class="selectItem" v-for="(items,index) in classList" :key="index" @click="goToDetails(items)">
				<image class="selectImg" :src="items.cover_img" mode=""></image>
				<view class="selectText">
					{{items.name}}
				</view>
				<!-- <text v-if="items.label !== null" class="label">{{items.label}}</text> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getypeList,
		getBookorder,
		getBookGold,
		getMemberPackage
	} from '../../module/index.js'
	const app = getApp()
	export default {
		data() {
			return {
				LinkType: app.globalData.LinkType,
				membersObj: null,
				expiration_time: "--",
				is_members: 0,
				current: 0,
				userInfo: {},
				list: [],
				privilegeList: [{
						icon: `../../static/dianshi.png`,
						text: `会员专享剧集`
					},
					{
						icon: `../../static/shandian.png`,
						text: `会员限时免费`
					},
					{
						icon: `../../static/lv_zuanshi.png`,
						text: `会员增币`
					},
					{
						icon: `../../static/huiyuan.png`,
						text: `尊贵标识`
					},
					{
						icon: `../../static/quguanggao.png`,
						text: `去除广告`
					},
					{
						icon: `../../static/huazhi.png`,
						text: `超清画质`
					}
				],
				classList: []
			}
		},
		onLoad(e) {
			var self = this
			uni.getStorage({
				key: 'user_info',
				success: function(res) {
					self.userInfo = res.data
				}
			});
			uni.setStorageSync('login_message', {
				official_account_id:e?.official_account_id,
				uid:e?.uid,
				video_id:e?.video_id
			})
		},
		onShow() {
			this.getcalssList(4)
			this.getBookGold()
			this.getMemberPackage()
		},
		methods: {
			getBookorder(item) {
				let obj = {
					total_fee: item.money,
					// total_fee:1,
					name: item.moth,
					number: item.num,
					type: 2
				}
				getBookorder(obj).then((res) => {
					var self = this
					if (res.code === 200) {
						var record_id = res.data.pay_record_id
						uni.requestPayment({
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: 'MD5',
							paySign: res.data.paySign,
							orderInfo:{
								'out_trade_no':res.data.out_trade_no
							},
							success(res) {
								console.log(res)
								uni.showToast({
									title: `会员开通成功`,
									icon: "none"
								})
								self.getBookGold()
							},
							fail(err) {
								console.log(err)
								if (err.errMsg = "requestPayment:fail cancel") {
									uni.showToast({
										title: `取消支付`,
										icon: 'none'
									});
								} else {
									uni.showToast({
										title: `支付失败`,
										icon: 'none'
									});
								}
							}
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},

			getBookGold() {
				getBookGold().then((res) => {
					if (res.code === 200) {
						console.log(res)
						this.is_members = res.data.is_members
						this.expiration_time = res.data.expiration_time
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			handleClick(el, index) {
				this.current = index
				this.membersObj = el
			},
			goKaiTong() {
				this.getBookorder(this.list[this.current])
			},
			getcalssList(type) {
				let obj = {
					type: type
				}
				//发起登录请求
				getypeList(obj).then((res) => {
					if (res.code === 200) {
						console.log(res)
						this.classList = res.data.data.slice(0, 3)
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getMore() {
				uni.navigateTo({
					url: `/wxcomponents/rankDetails/rankDetails?id=` + 4
				});
			},
			goToDetails(el) {
				if (this.LinkType == false) {
					uni.navigateTo({
						url: "/wxcomponents/testPage/index?video_id=" + el.id
					});
				} else {
					uni.navigateTo({
						url: `/components/yjy-video-slide/yjy-video-slide?video_id=` + el.id
					});
				}
			},
			getMemberPackage(){
				getMemberPackage().then((res) => {
					if (res.code === 200) {
						this.list = res.data
					}
				})
			},
		}
	}
</script>

<style scoped>
	page {
		padding: 0;
		margin: 0;
	}

	.warp {
		padding: 0px 30rpx 100rpx;
		position: relative;
	}

	.nav-content {
		display: flex;
		align-items: center;
		height: 200rpx;
		background-color: #cbc9c5;
		border-radius: 20rpx 20rpx;
		padding: 0rpx 24rpx;
	}

	.image-box {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		overflow: hidden;
	}

	.icon-box {
		width: 18px;
		height: 16px;
	}

	image {
		width: 60px;
		height: 60px;
		vertical-align: middle;
	}

	.uesr-info {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-left: 8px;
	}

	.info-top {
		font-size: 18px;
		font-weight: 600;
		color: #fff;
	}

	.info-bottom {
		font-size: 16px;
		color: #fff;
	}

	.view-list {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 24rpx;
		box-sizing: border-box;
	}

	.view-list>view {
		border: 1px solid #808080;
		text-align: center;
		width: 30%;
		padding: 40rpx 0rpx;
	}

	.discountPrice {
		font-weight: 900;
		color: black;
		font-size: 50rpx;
	}

	.originalPrice {
		color: #8e8c8c;
		text-decoration: line-through;
	}

	.view-list>.active {
		border: 1px solid #f75200;
		background-color: #fea97e;
		opacity: 0.8;
	}

	.privilege-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		margin-top: 24rpx;
		box-sizing: border-box;
	}

	.privilege-list image {
		width: 40rpx;
		height: 40rpx;
	}

	.item {
		margin: 12rpx 0rpx;
		border: 1px solid #d5c618;
		text-align: center;
		width: 30%;
		padding: 20rpx 0rpx;
		background-color: #fff2e2;
		color: #ccca81;
	}

	.title {
		display: flex;
		justify-content: space-between;
	}

	.Btn {
		position: fixed;
		bottom: 0;
		left: 0;
		text-align: center;
		background-color: #ffaa00;
		color: #fff;
		font-weight: 900;
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		z-index: 1000;
	}

	.image {
		width: 100%;
		border-radius: 12rpx;
	}

	.selectBox {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 8rpx 0rpx 20rpx;
	}

	.selectBox:after {
		display: block;
		content: "";
		width: 30%;
		height: 0px;
	}

	.selectItem {
		width: 30%;
		height: 360rpx;
		position: relative;
	}

	.selectImg {
		width: 100%;
		height: 300rpx;
		border-radius: 10rpx;
	}

	.label {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
		background-color: #D5C618;
		color: #FFFFFF;
		width: 80rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 26rpx;
		text-align: center;
		border-radius: 10rpx 0 10rpx 0rpx;
	}

	.selectText {
		font-weight: bold;
		font-size: 28rpx;
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
</style>
